<template>
  <recycle-scroller class="virtual-list" :buffer="1000" :prerender="200" style="height: 200px" :item-size="24"
    key-field="id" :items="tableData" ref="scrollContainer">
    <template v-slot="{ item, index }">
      <div class="list-item" :key="index">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
      </div>
    </template>
  </recycle-scroller>
</template>

<script>
import { itemGetAll } from '@/api/home.js'
export default {
  data() {
    return {
      tableData: [],
      scrollInterval:null
    }
  },
  created() {
    for (let i = 0; i < 100000; i++) {
      this.tableData.push({ id: i, name: Math.random() })
    }
  },
  methods: {
    async fetchData() {
      let params = {
        page: 1,
        pageSize: 99999999,
      }
      await itemGetAll(params).then(res => {
        const { list, total } = res.data;
        this.tableData = list
      })
    },
    // 启动自动滚动
    startAutoScroll() {
      const container = document.querySelector('.virtual-list');
      console.log(container.scrollTop);
      this.scrollInterval = setInterval(() => {
        container.scrollTop += 1;
      }, 50); // 每50ms滚动一次
    },
    // 停止自动滚动
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
  },
  mounted() {
    this.startAutoScroll()
    // this.fetchData();
  },
  beforeDestroy(){
    this.stopAutoScroll()
  }
};
</script>

<style scoped>
.virtual-list {
  width: 100%;
  padding: 10px;
  height: 400px;
}
</style>
